<script setup>
import { ref, onMounted, toRefs } from 'vue'
import {unit2} from '../unit.js'

defineProps({
    config: Object,
});



</script>

<template>

    <dl class="flexrow">
        <dt :style="{fontSize: unit2(config?.fontSize)}">{{ config?.label }}</dt>
        <dd class="flex1">
            <input type="text" :name="config?.name" class="input" :style="{
                fontSize: unit2(config?.fontSize),
                color: config?.color,
                backgroundColor: config?.backgroundColor,
                borderRadius: unit2(config?.borderRadius),
                borderWidth: unit2(config?.borderWidth),
                borderColor: config?.borderColor,
            }"></input>
        </dd>
    </dl>

</template>

<style scoped>
    dl{width: 100%;}
    dl dt{width: 22%;text-align: right;padding-right: 1em;}
    .input{
        width: 100%;margin: 0 auto;line-height: 2.6;
        border: #dddddd 1px solid;padding: 0 1em;
    }
</style>